<template>
  <div class="Map" id="map"></div>
</template>
<script>
import * as echarts from "echarts";
// 湖北省城市数据 可以在这个网站生成 http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
import mapData from "../assets/js/mapData.json";
export default {
  name: "Map",
  mounted() {
    // 初始化map
    this.drawMap("map");
  },
  methods: {
    // 初始化map
    drawMap(id) {
      // 注册地图数据
      echarts.registerMap("hubei", { geoJSON: mapData });
      // 基于准备好的dom，初始化echarts实例
      let mapChart = echarts.init(document.getElementById(id));
      // 指定图表的配置项和数据
      const options = {
        // 地理坐标系组件 该项配置主要是设置地图整体轮廓  配置项： https://echarts.apache.org/zh/option.html#geo
        // 只显示一个坐标系
        // geo: {
        //   // 使用 registerMap 注册的地图名称
        //   map: "hubei",
        //   // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
        //   roam: false,
        //   // 当前视角的缩放比例。
        //   zoom: 1.2,
        //   // 地图区域的多边形 图形样式。
        //   itemStyle: {
        //     // 地图区域的颜色。
        //     areaColor: "#0b7e9e",
        //     // 地图区域的描边颜色
        //     borderColor: "#ffffff",
        //     // 地图区域的描边宽度
        //     borderWidth: "1",
        //   },
        // },
        // 系列 可以配置多个坐标系  配置项： https://echarts.apache.org/zh/option.html#series
        series: [
          {
            // 地图类型
            type: "map",
            // 使用 registerMap 注册的地图名称
            map: "hubei",
            // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            roam: false,
            // 当前视角的缩放比例。
            zoom: 1.2,
            // 地图上的文字样式
            label: {
              // 是否显示
              show: true,
              // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
              // 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
              formatter: "{bStyle|{b}}",
              // 自定义富文本样式
              rich: {
                // 对应formatter里的参数{bStyle|{b}}  | 前面的bStyle
                bStyle: {
                  // style样式
                  color: "#fff",
                  fontSize: 10,
                  align: "center",
                },
              },
            },
            // 地图区域样式
            itemStyle: {
              // 地图区域的颜色
              areaColor: "#0b7e9e",
              // 地图区域的描边颜色
              borderColor: "#ffffff",
              // 地图区域的描边宽度
              borderWidth: "1",
            },
            // 地图区域选中过的样式
            select: {
              // 地图上的文字样式
              label: {
                // 是否显示
                show: true,
                // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
                // 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
                formatter: "{bStyle|{b}}",
                // 自定义富文本样式
                rich: {
                  // 对应formatter里的参数{bStyle|{b}}  | 前面的bStyle
                  bStyle: {
                    // style样式
                    color: "red",
                    fontSize: 12,
                    align: "center",
                  },
                },
              },
              // 地图区域样式
              itemStyle: {
                // 地图区域的颜色
                areaColor: "#ece39e",
                // 地图区域的描边颜色
                borderColor: "#ece39e",
                // 地图区域的描边宽度
                borderWidth: "1",
              },
            },
            // 高亮状态下的多边形和标签样式。
            emphasis: {
              // 是否关闭高亮状态。
              disabled: false,
              // 地图上的文字样式
              label: {
                // 是否显示
                show: true,
                // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
                // 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
                formatter: "{bStyle|{b}}",
                // 自定义富文本样式
                rich: {
                  // 对应formatter里的参数{bStyle|{b}}  | 前面的bStyle
                  bStyle: {
                    // style样式
                    color: "red",
                    fontSize: 12,
                    align: "center",
                  },
                },
              },
              // 地图区域样式
              itemStyle: {
                // 地图区域的颜色
                areaColor: "#ece39e",
                // 地图区域的描边颜色
                borderColor: "#ece39e",
                // 地图区域的描边宽度
                borderWidth: "1",
              },
            },
            data: [{ name: "武汉市", selected: true }], // selected:true 默认选中,
          },
        ],
      };
      // 设置echarts
      mapChart.setOption(options);
      // 将默认选中的城市通过事件机制传出去
      this.$emit("mapSelectName", {
        name: options.series[0].data[0].name,
      });
      // 监听地图上的点击事件
      mapChart.on("click", (param) => {
        // 循环地图数据
        mapData.features.forEach((item) => {
          // 判断选中的城市名和地图数据的城市
          if (item.properties.name === param.name) {
            // 点取位置的adcode
            console.log(item.properties.adcode);
            // 点取位置的name
            console.log(item.properties.name);
            // 将选中的城市放在配置项里,这个是为让用户无法取消选中，没有这个需求可以去掉下面两行代码
            options.series[0].data[0].name = item.properties.name;
            // chart.setOption(option, notMerge, lazyUpdate);
            // notMerge 可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
            // 重新设置echarts
            mapChart.setOption(options, true);
            // 将选中的城市通过事件机制传出去
            this.$emit("mapSelectName", {
              name: item.properties.name,
            });
          }
        });
      });
      // 监听图表容器的大小并改变图表大小
      window.addEventListener("resize", () => {
        mapChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#map {
  width: 600px;
  height: 600px;
  border: 1px solid #eee;
}
</style>